<template>
  <h1>信息</h1>
  姓：<input type="text" v-model="person.firstName" />
  <br />
  名：<input type="text" v-model="person.lastName" />
  <br />
  <span>姓名：{{ person.fullName }}</span>
  <br />
  <input type="text" v-model="person.fullName" />
</template>

<script>
import { ref, reactive, computed } from "vue";
export default {
  name: "Demo",
  //   Vue2写法
  //   computed: {
  //     fullName() {
  //   vue2需要用this
  //       return this.person.firstName + this.person.lastName;
  //     },
  //   },
  setup() {
    let person = reactive({
      firstName: "张",
      lastName: "三",
    });
    // 计算属性
    // person.fullName = computed(() => {
    //   return person.firstName + person.lastName;
    // });
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        const nameArr = value.split("-");
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      },
    });

    return {
      person,
    };
  },
};
</script>

<style>
</style>
